<template>
  <div class="dict-page">
    <el-row style="height: 100%">
      <el-col :span="8" style="padding-right: 10px">
        <div class="title">
          字典类型
          <div class="search">
            <el-input v-model="typeFilter" placeholder="输入类型关键字"/>
          </div>
        </div>
        <div class="type-list">
          <div class="type-item" :class="currType==item.id?'type-item-active':''" v-for="item in typeList" :key="item.id"
               v-if="item.name.indexOf(typeFilter)!=-1"
               @click="changeType(item)">
            {{item.name}}
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="height: calc(100% - 15px);overflow: auto;">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="dataList"
          :options="options"
          :rowHandle="rowHandle"
          @add-model="add"
          @edit-model="mod"
          index-row
          selection-row
          @row-click="rowClick"
          @selection-change="selectChange"
          @pagination-current-change="pageChange">
          <div class="title" slot="header">
            <span class="text">数据字典管理</span>
            <head-btns :add="add" :mod="mod" :del="del"/>
          </div>
        </d2-crud>
      </el-col>
    </el-row>
    <detail-info v-model="detailVisible" ref="detailFrom" @submit="_fetchListData"/>
  </div>
</template>
<script>
  import detailInfo from "./detail-info";
  import dictApi from "@/api/system/dict";
  import utils from '@/assets/utils/zhzf-util';
  import dictCache from '@/assets/utils/cache-dict-util';
  import HeadBtns from "@/views/comps/zhzf/head-btns";

  export default {
    name: "dictPage",
    components: {HeadBtns, detailInfo},
    data() {
      return {
        currType: '',
        typeList: {},
        dataList: [],
        typeFilter: '',
        detailVisible: false,
        columns: [
          {title: '名称', key: 'name'},
          {title: '编码', key: 'code'},
          {title: '描述', key: 'remark'},
        ],
        rowHandle: {
          custom: [
            {title: '修改', size: 'mini', emit: 'edit-model', icon: "el-icon-edit", style: "color:#67c23a;"}
          ]
        },
        options: {
          stripe: true,
          highlightCurrentRow: true
        },
        pagination: {
          currentPage: 1,
          pageSize: 20,
          total: 0
        },
        queryParam: {},
        selected: [],
      };
    },
    mounted() {
      this.initPage();
    },
    methods: {
      async initPage() {
        this.typeList = await dictCache.getTypeList();
        this.changeType(Object.values(this.typeList)[0]);
      },
      async changeType(item) {
        this.currType = item.id;
        await this._fetchListData();
      },
      pageChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this._fetchListData();
      },
      async _fetchListData() {
        this.dataList = await dictCache.getDataList(this.currType);
        this.dataList = Object.values(this.dataList);
        this.pagination.total = this.dataList.length;
      },
      rowClick(row) {
        this.$refs.d2Crud.$children[1].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      showDetail(row) {
        row = row || {};
        this.detailVisible = true;
        row.type = this.typeList[this.currType].name;
        this.$refs.detailFrom.initPage(row);
      },
      add() {
        this.showDetail();
      },
      mod(rd) {
        if (rd) {
          this.showDetail(rd.row);
        } else if (this.selected.length == 1) {
          this.showDetail(this.selected[0]);
        } else {
          utils.showTips('请选择一行数据');
          return;
        }
      },
      del(rd) {
        if (!rd && !this.selected.length) {
          utils.showTips('请选择要删除的数据', false);
          return;
        }
        let delIds = [];
        if (rd) {
          delIds = [rd.row.id];
        } else {
          this.selected.map(item => {
            delIds.push(item.id)
          });
        }

        this.$confirm("确认删除？", "确认信息", {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消"
        }).then(() => {
          this.submitDel(delIds)
        });
      },
      async submitDel(ids) {
        await dictApi.del(ids);
        await this.initPage();
      }
    }
  };
</script>

<style lang="scss">
  .dict-page {
    height: 100%;

    .search {
      float: right;

      input {
        height: 33px;
      }
    }

    .type-list {
      background: #fff;
      height: calc(100vh - 165px);
      overflow: auto;
      border: 1px solid #ccc;
      border-bottom: none;
      border-top: none;

      .type-item {
        padding: 0 15px;
        border-bottom: 1px solid #ccc;
        line-height: 35px;
        height: 35px;
        cursor: pointer;
      }

      .type-item-active, .type-item:hover {
        background: #c9e6ff;
      }

      .type-item-active {
        color: #027be3;
      }
    }
  }
</style>
